<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>login</title>
</head>
<style type="text/css">
*{margin: 0;padding: 0;list-style-type: none;font-family: 'Microsoft Yahei'}
body{width: 100%;height: 100%;padding-top: 70px;overflow: hidden;}
html{width: 100%;height: 100%;}
    .logo{width: 150px;height: 150;border-radius: 50%;margin: 0px auto;margin-bottom: 70px;}
    .logo img{width: 150px;height: 150px;border-radius: 50%}
	.main{width: 500px;height: 50px;margin: 0px auto;border: 2px solid #ccc;position: relative;}
	.name{border: none;width: 350px;height: 50px;text-indent: 5px;}
	.btn{width: 150px;height: 50px;border: none;color: #fff;font-size: 20px;background-color: #3385FF;position: absolute;right: 0;top: 0}
	.btn:hover{cursor:pointer}
	#info{width: 200px;height: 30px;line-height: 30px; display: absolute;left: 0;top: 50px;color: #3385FF;}
	.foot{width: 200px;height: 50px;margin:150px auto;text-align: center;line-height: 50px;}
	.foot a{color: #bbb;;text-decoration: none}
	.foot a:hover{text-decoration: underline;}
</style>
<body>
	<div class="logo">
		<a href="listen.html"><img src="./img/logo.png"></a>
	</div>
	<div class="main">
			<input type="text" class="name" name="pass" placeholder="PassWord" id="pass">
			<input type="submit" class="btn" value="Come" onclick="login()">
		<div id="info"></div>
	</div>
	<div class="foot"><a href="about.html">@ListenMe.me</a></div>
	
</body>
<script type="text/javascript">
    function login(){
    	//创建引擎
		var xmlHttpRequest;
		if (window.XMLHttpRequest)
		  {// code for IE7+, Firefox, Chrome, Opera, Safari
		  xmlHttpRequest=new XMLHttpRequest();
		  }
		else
		  {// code for IE6, IE5
		  xmlHttpRequest=new ActiveXObject("Microsoft.XMLHTTP");
		  }
        //创建引擎结束，上面这段代码通用，请勿更改        
        //如果引擎创建成功，准备发送数据
	    if(xmlHttpRequest){
	    	//被注释的代码为get请求
		    var url="index.php?action=login";
		    var msg=document.getElementById("pass").value;
		    var data="pass="+msg;
			xmlHttpRequest.open("post",url,true);
			xmlHttpRequest.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
			//在这里指定回调函数,初步尝试，回调函数不能写在外面	   
		    xmlHttpRequest.onreadystatechange=function handle(){
			    if(xmlHttpRequest.readyState==4){
			         if(xmlHttpRequest.status==200){
		                var str=xmlHttpRequest.responseText;
		                if(str=="ok"){
		                	window.location.href="index.html";
		                }else if(str=="none"){
                            document.getElementById("info").innerHTML="please check you pass";
		                }
		                
			         }      
			    } 		    	
		    };
		    //最后一步，发送数据
		    xmlHttpRequest.send(data);
            //这种方式是post提交方式
	    }
    }

    //解决php在框架内跳转的问题

</script>
</html>